import { ConfigPreview } from "@/docs/components/Preview";

# Select

Render a `select` input with a list of options. Extends [Base](base).

<ConfigPreview
  label="Example"
  componentConfig={{
    fields: {
      textAlign: {
        type: "select",
        options: [
          { label: "Left", value: "left" },
          { label: "Right", value: "right" },
        ],
      },
    },
    render: ({ textAlign }) => {
      return <p style={{ textAlign, margin: 0 }}>Hello, world</p>;
    },
  }}
/>

```tsx {5-11} copy
const config = {
  components: {
    Example: {
      fields: {
        textAlign: {
          type: "select",
          options: [
            { label: "Left", value: "left" },
            { label: "Right", value: "right" },
          ],
        },
      },
      render: ({ textAlign }) => {
        return <p style={{ textAlign }}>Hello, world</p>;
      },
    },
  },
};
```

## Params

| Param                 | Example                                               | Type     | Status   |
| --------------------- | ----------------------------------------------------- | -------- | -------- |
| [`type`](#type)       | `type: "select"`                                      | "select" | Required |
| [`options`](#options) | `options: [{ label: "Option 1", value: "option-1" }]` | Object[] | Required |

## Required params

### `type`

The type of the field. Must be `"select"` for Array fields.

```tsx {6} copy
const config = {
  components: {
    Example: {
      fields: {
        textAlign: {
          type: "select",
          options: [
            { label: "Left", value: "left" },
            { label: "Right", value: "right" },
          ],
        },
      },
      // ...
    },
  },
};
```

### `options`

The options for the select field. The `value` can be a String, Number or Boolean.

```tsx {7-10} copy
const config = {
  components: {
    Example: {
      fields: {
        textAlign: {
          type: "select",
          options: [
            { label: "Left", value: "left" },
            { label: "Right", value: "right" },
          ],
        },
      },
      // ...
    },
  },
};
```
